<template>
    <div>
        <a-form layout="inline" :model="searchData" style="margin-top: 10px">
            <a-form-item>
                <a-select style="width: 200px" v-model:value="searchData.status" placeholder="请选择订单状态">
                    <a-select-option :value="null">全部</a-select-option>
                    <a-select-option :value="0">待运输</a-select-option>
                    <a-select-option :value="1">运输中</a-select-option>
                    <a-select-option :value="2">验收</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item>
                <a-select style="width: 200px"
                          v-model:value="searchData.officeId"
                          show-search
                          :filter-option="filterOption"
                          :options="officeList"
                          :field-names="{label: 'name', value: 'id'}"
                          placeholder="请选择所属机构">
                </a-select>
            </a-form-item>
            <a-form-item>
                <a-space>
                    <a-button type="primary" @click="load(1)">搜索</a-button>
                    <a-button type="default" @click="reset">重置</a-button>
                </a-space>
            </a-form-item>
        </a-form>
        <a-button type="primary" style="margin-top: 10px" @click="openModal({})">新增</a-button>
        <a-table :dataSource="workOrderList"
                 style="margin-top: 10px"
                 :columns="columns"
                 :pagination="false"
                 bordered>
            <template #status="{text,record}">
                <a-tag v-if="text == 2" color="success">
                    <template #icon>
                        <check-circle-outlined/>
                    </template>
                    验收
                </a-tag>
                <a-tag v-if="text == 1" color="processing">
                    <template #icon>
                        <sync-outlined :spin="true"/>
                    </template>
                    运输中
                </a-tag>
                <a-tag v-if="text == 0" color="default">
                    <template #icon>
                        <clock-circle-outlined/>
                    </template>
                    待运输
                </a-tag>
            </template>
            <template #code="{text,record}">
                <a href="#" @click="openDraw(text)">{{text}}</a>
            </template>
            <template #action="{text,record}">
                <a-space>
                    <a-button type="primary" @click="openModal(record)">编辑</a-button>
                    <a-popconfirm
                            title="是否确认删除?"
                            ok-text="是"
                            cancel-text="否"
                            @confirm="okDelete(record.id)"
                    >
                        <a-button type="danger">删除</a-button>
                    </a-popconfirm>
                </a-space>
            </template>
        </a-table>
        <a-config-provider :locale="locale">
            <a-pagination style="margin-top: 10px; float: right"
                          v-model:current="pagination.current"
                          v-model:pageSize="pagination.pageSize"
                          show-quick-jumper
                          show-size-changer
                          :total="pagination.total"
                          :show-total="total => `总 ${total} 条数据`"
                          :page-size-options="pageSizeOptions"
                          @change="onChange"/>
        </a-config-provider>
        <a-modal v-model:visible="visible" title="新增或编辑" @ok="handleOk">

        </a-modal>
        <a-drawer :title="workOrderDetail.title"
                  :closable="false"
                  size="small"
                  width="1000px"
                  :visible="drawVisible"
                  @close="onClose">
            <template #extra>
                <a-button style="margin-right: 8px" type="primary" @click="onClose">关闭</a-button>
            </template>
            <a-descriptions bordered :column="1" :label-style="{textAlign: 'end'}">
                <a-descriptions-item label="工单编号">
                    {{workOrderDetail.code}}
                </a-descriptions-item>
                <a-descriptions-item label="工单状态">
                    <a-tag v-if="workOrderDetail.status == 2" color="success">
                        <template #icon>
                            <check-circle-outlined/>
                        </template>
                        验收
                    </a-tag>
                    <a-tag v-if="workOrderDetail.status == 1" color="processing">
                        <template #icon>
                            <sync-outlined :spin="true"/>
                        </template>
                        运输中
                    </a-tag>
                    <a-tag v-if="workOrderDetail.status == 0" color="default">
                        <template #icon>
                            <clock-circle-outlined/>
                        </template>
                        待运输
                    </a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="创建用户">
                    <p v-if="workOrderDetail.createUserName"> {{workOrderDetail.createUserName + ' - ' +
                        workOrderDetail.createOfficeName + ' ' +
                        workOrderDetail.createUserPhone}}
                    </p>
                </a-descriptions-item>
                <a-descriptions-item label="运输用户">
                    <p v-if="workOrderDetail.transportUserName">{{workOrderDetail.transportUserName + ' - ' +
                        workOrderDetail.transportOfficeName + ' ' +
                        workOrderDetail.transportUserPhone}}
                    </p>
                </a-descriptions-item>
                <a-descriptions-item label="处理用户">
                    <p v-if="workOrderDetail.recipientUserName">{{workOrderDetail.recipientUserName + ' - ' +
                        workOrderDetail.recipientOfficeName + ' ' +
                        workOrderDetail.recipientUserPhone}}</p>
                </a-descriptions-item>
                <a-descriptions-item label="转运清单">
                    <h3>运输车牌号：{{workOrderDetail.detailVo.plateNumber}}</h3>
                    <a-table :columns="detailColumns"
                             :data-source="workOrderDetail.detailList"
                             bordered
                             :pagination="false">
                        <template #wasteTypeName="{text,record}">
                            {{record.wasteTypeCode + '-' + record.wasteTypeName}}
                        </template>
                    </a-table>
                </a-descriptions-item>
                <a-descriptions-item label="转运记录">
                    <a-timeline :pending="workOrderDetail.status != 2 && workOrderDetail.status != null" :reverse="true">
                        <a-timeline-item v-for="(item,i) in workOrderDetail.transferVoList" :key="i">
                            <template v-if="workOrderDetail.status == 2 &&
                                 i == workOrderDetail.transferVoList.length - 1" #dot>
                                <SmileOutlined/>
                            </template>
                            <a-list :split="false">
                                <a-list-item>{{ item.updateDate}}</a-list-item>
                                <a-list-item>{{ item.content}}</a-list-item>
                                <a-list-item>操作员：{{ item.userName + " " + item.phone}}</a-list-item>
                                <template #footer>
                                    <hr>
                                </template>
                            </a-list>
                        </a-timeline-item>
                    </a-timeline>
                </a-descriptions-item>
            </a-descriptions>
        </a-drawer>
    </div>
</template>

<script>
    import {ref, onMounted} from 'vue'
    import axios from 'axios'
    import {message} from 'ant-design-vue';
    import {CheckCircleOutlined, SyncOutlined, ClockCircleOutlined, SmileOutlined} from '@ant-design/icons-vue'
    import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'

    export default {
        name: "order-workOrder",
        components: {
            CheckCircleOutlined,
            SyncOutlined,
            ClockCircleOutlined,
            SmileOutlined
        },
        setup() {
            const columns = [
                {
                    title: '订单号',
                    dataIndex: 'code',
                    key: 'code',
                    slots: {customRender: 'code'},
                    align: 'center',
                },
                {
                    title: '发起单位',
                    dataIndex: 'officeName',
                    key: 'officeName',
                    align: 'center'
                },
                {
                    title: '发起人',
                    dataIndex: 'createName',
                    key: 'createName',
                    align: 'center',
                },
                {
                    title: '运输人',
                    dataIndex: 'transportName',
                    key: 'transportName',
                    align: 'center'
                },
                {
                    title: '接收人',
                    dataIndex: 'recipientName',
                    key: 'recipientName',
                    align: 'center'
                },
                {
                    title: '状态',
                    dataIndex: 'status',
                    key: 'status',
                    slots: {customRender: 'status'},
                    align: 'center'
                },
                {
                    title: '操作',
                    key: 'action',
                    slots: {customRender: 'action'},
                    align: 'center',
                    fixed: 'right',
                    width: '200px'
                }
            ]
            const detailColumns = [
                {
                    title: '废物名称',
                    dataIndex: 'wasteTypeName',
                    key: 'wasteTypeName',
                    slots: {customRender: 'wasteTypeName'},
                    align: 'center',
                },
                {
                    title: '类别编号',
                    dataIndex: 'wasteCode',
                    key: 'wasteCode',
                    align: 'center'
                },
                {
                    title: '主害成份',
                    dataIndex: 'component',
                    key: 'component',
                    align: 'center',
                },
                {
                    title: '重量(吨)',
                    dataIndex: 'weight',
                    key: 'weight',
                    align: 'center'
                },
                {
                    title: '形态',
                    dataIndex: 'morphological',
                    key: 'morphological',
                    align: 'center'
                },
                {
                    title: '包装方式',
                    dataIndex: 'packaging',
                    key: 'packaging',
                    align: 'center'
                },
            ]
            const locale = zhCN
            const workOrder = ref({})
            const workOrderDetail = ref({})
            const workOrderList = ref([])
            const officeList = ref([])
            const searchData = ref({})
            const pagination = ref({
                current: 1,
                pageSize: 5,
            })
            const pageSizeOptions = ref(['5', '10', '20', '30', '50', '100'])
            const visible = ref(false);
            const drawVisible = ref(false);

            const handleOk = () => {
                axios.post('/work-order/saveOrUpdate', workOrder.value).then(rs => {
                    console.log("新增或修改结果：", rs)
                    if (rs.data.code == 200) {
                        visible.value = false
                        message.success("操作成功")
                        load()
                    } else {
                        message.error(rs.data.message)
                    }
                })
            }

            const okDelete = (id) => {
                console.log("要删除的ID：" + id)
                axios.delete('/work-order/delete/' + id).then(rs => {
                    if (rs.data.code == 200) {
                        message.success("删除成功")
                        load()
                    } else {
                        message.error(rs.data.message)
                    }
                })
            }

            const openModal = (obj) => {
                console.log("模态框参数：", obj)
                visible.value = true;
                workOrder.value = JSON.parse(JSON.stringify(obj))
            }

            const load = (pageNum) => {
                pagination.value.current = pageNum == 1 ? 1 : pagination.value.current
                axios.get('/work-order/list', {
                    params: {
                        pageNum: pagination.value.current,
                        pageSize: pagination.value.pageSize,
                        status: searchData.value.status,
                        officeId: searchData.value.officeId
                    }
                }).then(rs => {
                    console.log("查找结果：", rs)
                    workOrderList.value = rs.data.data.records
                    pagination.value.total = rs.data.data.total
                })
            }

            const onChange = (pageNum, pageSize) => {
                pagination.value.current = pageNum
                pagination.value.pageSize = pageSize
                load()
            }

            const reset = () => {
                searchData.value = {}
                load()
            }

            const filterOption = (input, option) => {
                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0;
            }

            const openDraw = (workOrderCode) => {
                console.log("工单Id", workOrderCode)
                axios.get('work-order/workOrderDetail/' + workOrderCode).then(rs => {
                    console.log("工单结果", rs.data.data)
                    workOrderDetail.value = rs.data.data
                    workOrderDetail.value.title = '<' + workOrderDetail.value.code + '>详情'
                    if (workOrderDetail.value.detailVo == null){
                        workOrderDetail.value.detailVo = {}
                    }
                    workOrderDetail.value.detailList = []
                    workOrderDetail.value.detailList.push(workOrderDetail.value.detailVo)
                    drawVisible.value = true
                })
            }
            const onClose = () => {
                drawVisible.value = false

            }


            onMounted(() => {
                axios.get('sys-office/queryAll').then(rs => {
                    officeList.value = rs.data.data
                    officeList.value.unshift({
                        id: null,
                        name: '全部'
                    })
                })
                load()
            })
            return {
                columns,
                workOrder,
                workOrderList,
                pagination,
                pageSizeOptions,
                onChange,
                load,
                locale,
                searchData,
                reset,
                visible,
                openModal,
                handleOk,
                okDelete,
                officeList,
                filterOption,
                openDraw,
                onClose,
                drawVisible,
                workOrderDetail,
                detailColumns
            }
        }
    }
</script>

<style scoped>

</style>